<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}"></script>
</head>
<body style=" background-image: url('/images/book3.jpg');background-size: 100% ">
<div class="layui-container" style="margin-top: 50px;">

    <div class="layui-container" style="width: 500px;height: 330px;padding-top: 60px;">
        <form class="layui-form" action="/bookAdmin/updateBook" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">图书编号：</label>
                <div class="layui-inline">
                    <input type="text" name="id" lay-verify="required" autocomplete="off" placeholder="请输入用图书名称" class="layui-input" th:value="${book.id}" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">图书名称：</label>
                <div class="layui-inline">
                    <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入用图书名称" class="layui-input" th:value="${book.name}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">图书作者：</label>
                <div class="layui-inline">
                    <input type="text" name="author" lay-verify="required" placeholder="请输入图书作者" autocomplete="off" class="layui-input" th:value="${book.author}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出版社：</label>
                <div class="layui-inline">
                    <input type="text" name="publish" lay-verify="required" placeholder="请输入出版社" autocomplete="off" class="layui-input" th:value="${book.publish}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">总页数：</label>
                <div class="layui-inline">
                    <input type="text" name="pages" lay-verify="required" placeholder="请输入总页数" autocomplete="off" class="layui-input" th:value="${book.pages}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">价格：</label>
                <div class="layui-inline">
                    <input type="text" name="price" lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input" th:value="${book.price}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">图书分类：</label>
                <div class="layui-input-inline">
                    <select name="bookcase.id">
                        <option th:each="type:${types}" th:text="${type.name}" th:value="${type.id}" th:if="${book.bookcase.id}==${type.id}" selected></option>
                        <option th:each="type:${types}" th:text="${type.name}" th:value="${type.id}" th:if="${book.bookcase.id}!=${type.id}"></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" lay-submit="" lay-filter="demo2" style="margin-left: 160px;">保存信息</button>
            </div>
        </form>
    </div>
</div>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script>
    layui.use(['form', 'element'], function(){
        var form = layui.form;
        var element = layui.element;

        //自定义验证规则
        form.verify({
            name: [/^[\u4e00-\u9fa5]+$/,"请输入正确的书名"],
            author:[/^[\u4e00-\u9fa5]+$/,"请输入正确的作者"],
            publish:[/^[\u4e00-\u9fa5]+$/,"请输入正确的出版社"],
            pages: [/^[0-9]*$/, "请输入正确的页数"],
            price: [/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, "请输入正确的价格"]
        });

    });
</script>
</body>
</html>